<template>
  <div class="public-box left-box">
    <p class="public-tit">在苏企业分布</p>
    <el-scrollbar class="left-scrollbar" style="height: calc(100% - 70px);width: calc(100% - 20px)">
      <div v-for="(item,index) in cityItems" :key="index" class="each">
        <div class="flex-space-between">
          <span class="city-name"> {{ item.areaName }}</span>
          <strong>{{ item.enterpriseCount }}</strong>
        </div>
        <el-progress class="blue-progress" :show-text="false" :percentage="item.percent" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>

import { stt } from '@/models/screen'

export default {
  name: 'LeftTop',
  data() {
    return {
      cityItems: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const { data } = await stt.getScreenStatisticsEnterpriseInSz()
      this.cityItems = data
    }
  }
}
</script>

<style scoped lang="less">
.each {
  margin-bottom: 25px;
  padding-right: 50px;
  box-sizing: border-box;

  &:first-child {
    margin-top: 50px;
  }

  .flex-space-between {
    margin-bottom: 10px;
  }

  .city-name {
    color: rgba(255, 255, 255, .8);
    .font-28();
  }

  strong {
    font-size: 30px;
    font-weight: bold;
    color: #11BFFE;
  }
}

</style>
